import { defineConfig, loadEnv } from "vite";
import type { UserConfig, ConfigEnv } from 'vite';
import externalGlobals from "rollup-plugin-external-globals";
import { fileURLToPath } from "url";
// import { createHtmlPlugin } from 'vite-plugin-html';
import brotli from 'rollup-plugin-brotli';
// import ViteCompression from 'vite-plugin-compression';
import vue from '@vitejs/plugin-vue';
// import { viteMockServe } from 'vite-plugin-mock';
import { visualizer } from "rollup-plugin-visualizer";
import path from 'path'
import Unocss from "unocss/vite";
// 外链
const globals = externalGlobals({
  // 你需要使用外联的库
  echart: 'echart'
})

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  // 获取当前工作目录
  const root = process.cwd()
  // 获取当前环境变量
  const env = loadEnv(mode, root)
  return {
    // 项目的根目录
    root,
    // 项目部署的基础路径
    base: './',
    // 无需处理的静态资源
    publicDir: fileURLToPath(new URL('./public', import.meta.url)),
    // 需要处理的静态资源
    assetsInclude: fileURLToPath(new URL('./src/assets', import.meta.url)),
    css: {
      preprocessorOptions: {
        // 处理less 不用less可以注释
        // less: {
        //   javascriptEnabled: true
        // }
      }
    },
    // 插件处理
    plugins: [
      Unocss(),
      // 外链配置
      // createHtmlPlugin({
      //   inject: {
      //     data:{
      //       echartscript: '<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/echarts"></script>',
      //     }
      //   }
      // }),
      // br压缩
      brotli({}),
      // gzip压缩
      // ViteCompression({
      //   threshold: 1024 * 20, // 超过20kb才进行压缩
      //   ext: '.gz', // 压缩后缀
      //   algorithm: 'gzip' // 压缩算法
      // }),
      // Vue模板文件编译插件
      vue(),
      // 开启Mock服务器
      // viteMockServe({
      //   // 如果接口为 /mock/xxx 以 mock 开头就会被拦截响应配置的内容
      //   mockPath: 'mock',// 拦截mock起始url
      //   enable: true,// 本地环境是否开启mock
      // }),
    ],
    // 运行后本地预览的服务器
    server: {
      // 是否开启https
      // https: true,
      // 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
      host: true,
      // 开发环境预览服务器端口
      port: 8088,
      // 启动后是否自动打开浏览器
      open: false,
      // 是否开启CORS跨域
      cors: true,
      // 代理服务器
      // 帮助我们开发时解决跨域问题
      proxy: {
        // 以/api开头发送的请求都会被转发到 测试或生产地址
        [env.VITE_APP_API_BASEURL]: {
          // 目标服务器地址
          // target: 'http://localhost:8088',
          // 改变 Host Header
          changeOrigin: true
          // 发起请求时将 '/api' 替换为 ''
          //rewrite: (path) => path.replace(/^\/api/, ""),
        },
        // 本地mock代理
        // [env.VITE_APP_MOCK_BASEURL]: {
        //     target: 'http://localhost:8088',
        //     // 改变 Host Header
        //     changeOrigin: true
        //     // 发起请求时将 '/api' 替换为 ''
        //     //rewrite: (path) => path.replace(/^\/api/, ""),
        // }
      }
    },
    // 打包配置
    build: {
      // 关闭 sourcemap 报错不会映射到源码
      sourcemap: false,
      // 打包大小警告 单位kb
      chunkSizeWarningLimit: 400,
      rollupOptions: {
        // 打包入口文件
        input: {
          index: fileURLToPath(new URL('./index.html', import.meta.url)),
        },
        // 外部依赖
        // external: ['echart'],
        plugins: [visualizer({ open: true }), globals],
        // 记录模块的副作用，防止打包时被tree shaking
        // experimentalLogSideEffects: true,
        treeshake: {
          // 官方推荐 recommended
          preset: 'recommended'
          // propertyReadSideEffects: true
        },
        output: {
          // 打包最小代码块大小 单位kb
          experimentalMinChunkSize: 20 * 1024,
          // 打包规则补充
          manualChunks: (id: string) => {
            // 第三方包一起打包成一个 vendor 文件
            if (id.includes('node_modules')) {
              return 'vendor'
            }
            // 使用的少的包也可以单独打个包
            // if(id.includes('包名')) {
            //   return '打包名'
            // }
          },
          chunkFileNames: 'static/js/[name]-[hash].js',// 代码分割后文件名
          entryFileNames: 'static/js/[name]-[hash].js',// 入口文件名
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',// 静态资源文件名
        }
      }
    },
    // 配置别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
})
